<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/mycss.css">
    <script src="../sys/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <h2 style="color:brown; text-align: center;">学生基本信息管理</h2>
        <hr width="100%" />
        <br />

        学号：<input style="width:80px;" v-model="no" type="text" value="" />
        姓名：<input style="width:80px;" v-model="name" type="text" value="" />
        性别：<select v-model="sex" ref="ipt_sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        生日：<input style="width:90px;" v-model="birth" type="text" value="" placeholder="如2022-07-03"/>
        班级：<select id="iclass">
            <option value="信息20-1班">信息20-1班</option>
            <option value="信息20-2班">信息20-2班</option>
        </select>
        住所：<input style="width:120px;" v-model="address" type="text" value="" />
        <input @click="addStu()" type="button" value="新增" ref="addbtn" /><!-- 新增功能按钮 -->
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input ref="txtsearch" type="text" placeholder="请输入学号/姓名"/>
        <input @click="searchStu()" type="button" value="搜索" /><!-- 功能按钮 -->

        <br /><br />
        <table id="stu" cellpadding="0" cellspacing="0">
            <tr>
                <td>序号</td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出身年月日</td>
                <td>班级</td>
                <td>宿舍位置</td>
                <td>操作</td>
            </tr>
            <tr v-for="(stu,i) in arrStu" :key="stu.no">
                <td>{{i+1}}</td>
                <td>{{stu.no}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.sex}}</td>
                <td>{{stu.birth}}</td>
                <td>{{stu.iclass}}</td>
                <td>{{stu.address}}</td>
                <td>
                    <input @click="delStu(stu.no)" type="button" value="删除" /><!-- 功能按钮 -->
                    <input @click="modifyStu(stu.no)" type="button" value="修改" /><!-- 功能按钮 -->
                </td>
            </tr>
        </table>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                arrStu: [
                    {
                        xh: 1,
                        no: '20210101',
                        name: '王诗雨',
                        sex: '女',
                        birth: '2001-08-06',
                        iclass: '信息20-1班',
                        address: '12号楼'
                    },
                    {
                        xh: 2,
                        no: '20210211',
                        name: '苏俊逸',
                        sex: '男',
                        birth: '2001-07-08',
                        iclass: '信息20-2班',
                        address: '11号楼'
                    },
                    {
                        xh: 3,
                        no: '20210115',
                        name: '王琳欣',
                        sex: '女',
                        birth: '2002-03-08',
                        iclass: '信息20-1班',
                        address: '12号楼'
                    },
                    {
                        xh: 4,
                        no: '20210116',
                        name: '白艳明',
                        sex: '男',
                        birth: '2002-05-06',
                        iclass: '信息20-2班',
                        address: '11号楼'
                    }
                ],
                no: "",
                name: "",
                sex: "男",
                birth: "",
                iclass: "信息20-1班",
                address: "",
                curstu: -1
            },
            methods: {
                addStu() {//新增学生
                    console.log("addStu");
                    var s = {
                        xh: this.addStu.length + 1,
                        no: this.no,
                        name: this.name,
                        sex: this.sex,
                        birth: this.birth,
                        iclass: this.iclass,
                        address: this.address
                    };
                    //空白信息不能新增
                    if (s.no == "" || s.name == "" || s.birth == "" || s.address == "") {
                        alert("学生信息不完整，请检查输入！");
                        return;
                    }
                    //学号的格式问题，学号一定要是数字
                    var n = Number(s.no);
                    if (isNaN(n)) {
                        alert("学号格式错误，请重新输入！");
                        return;
                    }
                    //日期格式的问题
                    var times = s.birth;
                    var reg = /^[0-9,/:-\s]+$/;
                    if (isNaN(Date.parse(new Date(times.replace(/-/g, '-')))) && isNaN(times) && reg.test(times)) {
                        alert("日期格式错误(正确格式如2022-07-03)，请检查后重新输入！");
                        return;
                    }
                    // var str2 = times.split("-").join("");//把 - 替换成 空 字符串
                    // //判断是否有 8 个数字
                    // var timesInt = parseInt(str2);
                    // if(timesInt<=10000000 || timesInt>=99999999 || timesInt){
                    //     alert("日期格式错误(正确格式如2022-07-03)，请检查后重新输入！");
                    //     return;
                    // }
                    //新增还是保存
                    for (var i = 0; i < this.arrStu.length; i++) {
                        //新增按钮---同一学号的同学不能再新增
                        if (this.arrStu[i].no == s.no && this.$refs.addbtn.value == "新增") {
                            alert("已有同一学号的同学！");
                            return;
                        }
                        //保存按钮---保存这个学生修改后的信息
                        if (this.$refs.addbtn.value == "保存") {
                            this.arrStu[this.curstu].no = this.no;
                            this.arrStu[this.curstu].name = this.name;
                            this.arrStu[this.curstu].sex = this.sex;
                            this.arrStu[this.curstu].birth = this.birth;
                            this.arrStu[this.curstu].iclass = this.iclass;
                            this.arrStu[this.curstu].address = this.address;
                            return;
                        }
                    }
                    this.arrStu.push(s);
                },
                delStu(_no) {//删除学生
                    for (var i = 0; i < this.arrStu.length; i++) {
                        if (this.arrStu[i].no == _no) {
                            this.arrStu.splice(i, 1);
                            break;
                        }
                    }
                },
                modifyStu(_no) {//修改学生信息
                    //定位到要修改的学生
                    console.log("modify");
                    for (var i = 0; i < this.arrStu.length; i++) {
                        if (this.arrStu[i].no == _no) {
                            var stu = this.arrStu[i];
                            this.curstu = i;//保存当前学生的位置
                            break;
                        }
                    }
                    //将修改信息填充到表单中
                    this.no = stu.no;
                    this.name = stu.name;
                    this.sex = stu.sex;
                    this.birth = stu.birth;
                    this.iclass = stu.iclass;
                    this.address = stu.address;
                    this.$refs.addbtn.value = "保存";
                    //后面就是 addstu 函数的工作了
                },
                searchStu() {//搜索学生
                    console.log("search");
                    var stuInfo="";
                    for (var i = 0; i < this.arrStu.length; i++) {
                        //比对学号
                        if (this.arrStu[i].no == this.$refs.txtsearch.value) {
                            var stu = this.arrStu[i];
                            stuInfo=stu.no+" "+stu.name+" "+stu.sex+" "+stu.birth+" "+stu.iclass+" "+stu.address;
                            break;
                        }
                        //比对姓名
                        if (this.arrStu[i].name == this.$refs.txtsearch.value) {
                            var stu = this.arrStu[i];
                            stuInfo1=stu.no+" "+stu.name+" "+stu.sex+" "+stu.birth+" "+stu.iclass+" "+stu.address+'\n';
                            stuInfo=stuInfo+stuInfo1;
                        }
                    }
                    if(stuInfo==""){
                        alert("没有该学生信息！");
                        return;
                    }
                    else{
                        alert(stuInfo);
                        return;
                    }
                }
            }
        })
    </script>
</body>

</html>